<template>
    <el-card class="chart-card">
      <template #header>
        <h3 class="chart-title">{{ title }}</h3>
      </template>
      <div class="chart-wrapper">
        <slot></slot>
      </div>
    </el-card>
  </template>
  
  <script setup lang="ts">
  defineProps<{
    title: string
  }>()
  </script>
  
  <style scoped lang="scss">
  .chart-card {
    height: 100%;
  
    :deep(.el-card__header) {
      padding: 15px 20px;
      background: #fafafa;
    }
  
    .chart-title {
      margin: 0;
      font-size: 14px;
      color: #333;
    }
  
    .chart-wrapper {
      height: 400px;
      position: relative;
  
      @media (max-width: 768px) {
        height: 300px;
      }
    }
  }
  </style>